<!--********************************************************************
* by jiawanlong
*********************************************************************-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./../../cesium/Cesium1.98/Widgets/widgets.css" />
    <script type="text/javascript" src="./../../cesium/Cesium1.98/Cesium.js"></script>
    <script src="./CircleScanSystem.js"></script>
</head>

<body style="
      margin: 0;
      overflow: hidden;
      background: #fff;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
    ">
    <div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>

    <script type="text/javascript">
        Cesium.Ion.defaultAccessToken =
            "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZjQ5ZGUzNC1jNWYwLTQ1ZTMtYmNjYS05YTY4ZTVmN2I2MDkiLCJpZCI6MTE3MTM4LCJpYXQiOjE2NzY0NDUyODB9.ZaNSBIfc1sGLhQd_xqhiSsc0yr8oS0wt1hAo9gbke6M";
        const viewer = new Cesium.Viewer("map", {
            contextOptions: {
                // requestWebgl1: true,
            },
        });
        viewer.scene.debugShowFramesPerSecond = true;
        viewer.scene.globe.depthTestAgainstTerrain = true;

        viewer.camera.setView({
            destination: Cesium.Cartesian3.fromDegrees(116.36485552299206, 39.99754814959118, 5000.0)
        });
        var circleScanSystem = new CircleScanSystem(viewer, {
            type: 'Circle',
            lon: '116.34485552299206',
            lat: '39.99754814959118'
        });
        var circleScanSystem1 = new CircleScanSystem(viewer, {
            type: 'Radar',
            lon: '116.37986552299206',
            lat: '39.99754814959118'
        });
        var circleScanSystem2 = new CircleScanSystem(viewer, {
            type: 'Radar',
            lon: '116.34485552299206',
            lat: '39.97954814959118'
        });

    </script>
</body>

</html>